/**
 * 参考地址：https://pro.naiveadmin.com/dashboard/console
 */

import { Col, Row } from "antd";
import Chart from "./components/chart.tsx";
import { useMemo } from "react";
import { useRequest } from "ahooks";
import { request } from "@/utils/request.ts";

const DashboardAnalysis = () => {
  const { data } = useRequest(() => request.get("/admin/base/open/analysis"));

  const oneOption = useMemo(() => {
    const result: any = {
      tooltip: {},
      grid: { left: "20%" },
      xAxis: { type: "category", data: [] },
      yAxis: { type: "value" },
      series: [
        {
          data: [],
          type: "bar",
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "red", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "blue", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    };
    if (data) {
      result.xAxis!.data = data.visits.map((item: any) => item.label);
      result.series[0].data = data.visits.map((item: any) => item.value);
    }
    return result;
  }, [data]);

  const twoOption = useMemo(() => {
    const result: any = {
      grid: {
        left: "20%",
        right: "25%",
      },
      xAxis: {
        type: "value",
        axisLabel: { show: false },
        splitLine: { show: false },
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          data: [],
          axisLabel: {
            formatter: (value: any, index: any) => {
              if (index === 0) {
                return `{str0|${index + 1}} ${value}`;
              } else if (index === 1) {
                return `{str1|${index + 1}} ${value}`;
              } else if (index === 2) {
                return `{str2|${index + 1}} ${value}`;
              } else {
                return `{str|${index + 1}} ${value}`;
              }
            },
            rich: {
              str: {
                width: 15,
                height: 15,
                align: "center",
                borderRadius: 15,
              },
              str0: {
                width: 15,
                height: 15,
                align: "center",
                borderRadius: 15,
                backgroundColor: "red",
              },
              str1: {
                width: 15,
                height: 15,
                align: "center",
                borderRadius: 15,
                backgroundColor: "green",
                color: "red",
              },
              str2: {
                width: 15,
                height: 15,
                align: "center",
                borderRadius: 15,
                backgroundColor: "blue",
                color: "red",
              },
            },
          },
        },
        {
          type: "category",
          inverse: true,
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            formatter: "转换率: {value} %",
          },
          data: [],
        },
      ],
      series: [
        {
          data: [],
          colorBy: "data",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            borderRadius: 5,
          },
        },
      ],
    };
    if (data) {
      const total = data.regionRanking.reduce((total: any, item: any) => {
        return (total += item.value);
      }, 0);
      result.yAxis[0].data = data.regionRanking.map((item: any) => item.label);
      result.yAxis[1].data = data.regionRanking.map((item: any) =>
        ((item.value / total) * 100).toFixed(2)
      );
      result.series[0].data = data.regionRanking.map((item: any) => item.value);
    }
    return result;
  }, [data]);

  const threeOption = useMemo(() => {
    const result = {
      legend: {
        right: 0,
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "当月销售额",
          stack: "a",
          data: [],
          type: "line",
          areaStyle: {},
        },
        {
          name: "月均销售额",
          stack: "a",
          data: [],
          type: "line",
          areaStyle: {},
        },
      ],
    };
    if (data) {
      result.xAxis.data = data.sales.map((item: any) => item.label);
      result.series[0].data = data.sales.map((item: any) => item.current);
      result.series[1].data = data.sales.map((item: any) => item.average);
    }

    return result;
  }, [data]);

  const fourOption = useMemo(() => {
    const result = {
      title: {
        text: "访问来源",
        subtext: "全站来源统计",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["30%", "50%"],
          data: [
            // { value: 1048, name: "搜索引擎" },
            // { value: 735, name: "直接访问" },
            // { value: 580, name: "邮件营销" },
            // { value: 484, name: "联盟广告" },
            // { value: 300, name: "视频广告" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    if (data) {
      result.series[0].data = data.source.map((item: any) => ({
        name: item.label,
        value: item.value,
      }));
    }

    return result;
  }, [data]);

  return (
    <div>
      <Row gutter={20}>
        <Col span={12}>
          <Chart title="访问量" option={oneOption} />
        </Col>
        <Col span={12}>
          <Chart title="区域排行" option={twoOption} />
        </Col>
      </Row>

      <Row gutter={20}>
        <Col span={12}>
          <Chart title="销售额" option={threeOption as any} />
        </Col>
        <Col span={12}>
          <Chart title="访问来源" option={fourOption as any} />
        </Col>
      </Row>
    </div>
  );
};

export default DashboardAnalysis;

//  www.mz.com?form=baidu
//  www.mz.com?form=sina
//  www.mz.com?form=weibo

// <script>
//   window.onload = () => {
//   ajax('xxxx', {
//     form: location.href.search
//   })
// }
// </script>
